<style>
    .client {
        box-sizing: border-box;
        border: none;
        margin: 0;
        padding: 0;
    }

    .client iframe {
        width: 100%;
        aspect-ratio: 16/9;
        border: 1px solid green;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    .client-wrap[row] .client {
        flex: 0 0 50%;
    }
</style>

<dom>
    <div class="client">
        <div class="client-title">
            <div class="row">
                <div $="lbTitle">Client</div>
                <button @click="onClickRefresh">刷新</button>
            </div>
            <div class="row" style="flex:1">
                <input style="width:100%;" $="ebParams" placeholder="params"/>
            </div>
            <div class="row">
                <select style="width:auto;" $="selAsp" @change="onSelectAspectRadio">  
                    <option value ="1625,750">1625x750</option>  
                    <option value ="1334,750">1334x750</option>  
                    <option value ="1206,750">1206x750</option>  
                    <option value ="4,3">4:3</option>  
                    <option value ="16,9">16:9</option> 
                </select>
                <button @click="onClickRotate">rotate</button>
                <button @click="onClickClose">x</button>
            </div>
        </div>
        <iframe $="frame" class="client" src="index-single.html"></iframe>
    </div>
</dom>